<!--
*@Author: zt
*@Description: 会议室详情
*@Date: 2024-07-08 17:04:38
-->
<template>
  <u-dialog v-bind="$attrs" @close="dialogClose">
    <a-layout class="f-h-100">
      <a-layout-content class="s-bg-white" style="overflow: auto">
        <a-row class="f-h-100">
          <a-col :span="12">
            <a-image
              :src="urlFile('login/login.png')"
              :preview="false"
              style="border-radius: 8px; max-height: 70%"
            ></a-image>
            <div>
              <span style="font-size: 24px; color: #333333">
                4号会议室（大型）
              </span>
              <a-tag color="rgba(82,196,26,0.2)" style="color: #52c41a">
                使用中
              </a-tag>
            </div>
            <u-form :elements="formEls" :model="form"></u-form>
          </a-col>
          <a-col :span="12">
            <MeetCalender
              :show-view-year="false"
              :show-extra-tool="false"
              calendar-type="day"
            >
              <template #headerBefore></template>
            </MeetCalender>
          </a-col>
        </a-row>
      </a-layout-content>
    </a-layout>
  </u-dialog>
</template>

<script lang="ts" setup>
import { ref, reactive } from 'vue';
import { _IFormEl, _IExtra } from '@/src/components/common/form/interface';
import { FormInstance, FormItemProps } from 'ant-design-vue';
import { _IColumnProps } from '@/components/common/tableEdit/interface.ts';
import { urlFile } from '@/util/common';
import MeetCalender from '@/views/oa/assist/myCalender/Calender.vue';

const formRef = ref<FormInstance>();
const form = reactive({
  a: 'A项目研讨会',
  b: 'A座2楼',
  c: '100人',
  d: '2024.06.13 13:00—2024.06.13 18:00',
  e: '当前会议室做为三楼办公人员使用',
});
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '80px',
  colon: false,
};
const formEls: Array<_IFormEl> = [
  {
    label: '会议名称',
    key: 'a',
    col: { span: 24 },
    element: 'text',
    formItemProps: { ...formItemProps },
  },
  {
    label: '会议地点',
    key: 'b',
    col: { span: 24 },
    element: 'text',
    formItemProps: { ...formItemProps },
  },
  {
    label: '容纳人数',
    key: 'c',
    col: { span: 24 },
    element: 'text',
    formItemProps: { ...formItemProps },
  },
  {
    label: '使用时间',
    key: 'd',
    col: { span: 24 },
    element: 'text',
    formItemProps: { ...formItemProps },
  },
  {
    label: '备注',
    key: 'e',
    col: { span: 24 },
    element: 'text',
    formItemProps: { ...formItemProps },
  },
];

// 弹窗关闭
const dialogClose = () => {
  formRef.value.form.resetFields();
};
</script>

<style lang="scss"></style>
